/* animations.css */
/* Initial states for on-scroll animations */
.hidden {
    opacity: 0;
    /* Very professional, slow, and graceful transition */
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in {
    /* Opacity only, handled by .hidden and .show */
}

.slide-up {
    transform: translateY(50px);
}

.slide-left {
    transform: translateX(30px);
}

.slide-right {
    transform: translateX(-30px);
}

.zoom-in {
    transform: scale(0.95);
}

/* Final states triggered via Javascript IntersectionObserver */
.show {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Delay modifiers for staggered animations */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* Interactive Hover Animations */
.hover-zoom {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-zoom:hover {
    /* removed lift and shadow as requested */
}

.hover-zoom:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Specific elements hover states */
.button, .explore, .partner, .send-message {
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.button:hover, .explore:hover, .send-message:hover, .value-item:hover .core-button, .sector-card:hover .icon-circle {
    transform: scale(1.05);
}

.value-item:hover .core-button i, .sector-card:hover .icon-circle i {
    transform: rotate(15deg);
    transition: transform 0.3s ease;
}

.value-item {
    cursor: pointer;
    position: relative;
    padding-bottom: 15px;
}

.value-item::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: orange;
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 10px;
}

.value-item:hover::after {
    width: 80%;
}

.sector-card {
    cursor: pointer;
}

/* Philosophy Section Animations */
.Each-Philosophy {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.Each-Philosophy:hover {
    transform: translateY(-5px);
}

.Each-Philosophy:hover .div-numberEach {
    background-color: white;
    color: orange;
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(255, 165, 0, 0.5);
}

.Each-Philosophy:hover .div-numberEach p {
    color: orange;
}

.div-numberEach, .div-numberEach p {
    transition: all 0.3s ease;
}
.partner:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}